import QtQuick 2.0
import SvgImage 1.0

Rectangle {
    id: root
    color: "transparent"
    implicitWidth: indicator.width + boxText.width + spacing
    opacity: enabled ? 1 : 0.5
    signal entered()
    signal exited()
    signal clickCheckBox();

    property bool checked: false
    property alias indicator: indicator
    property alias text: boxText
    property alias indicatorImage: indicatorImage
    property alias font_pixelSize: boxText.font.pixelSize
    property int spacing: 0

    property url source_unselect_normal: "qrc:/image/check_unselect_normal.svg"
    property url source_selected_normal: "qrc:/image/check_select_normal.svg"
    property url source_unselect_hover: "qrc:/image/check_unselect_hover.svg"
    property url source_selected_hover: "qrc:/image/check_select_hover.svg"

    onCheckedChanged: {
        if( checked ) { indicatorImage.source = source_selected_normal }
        else { indicatorImage.source = source_unselect_normal }
    }

    MouseArea {
        id: mouseArea
        anchors.fill: parent
        hoverEnabled: true
        onClicked: {
            checked = !checked
            clickCheckBox()
            if( checked ) { indicatorImage.source = source_selected_hover }
            else { indicatorImage.source = source_unselect_hover }
        }
        onEntered: {
            indicatorImage.source = checked ? source_selected_hover : source_unselect_hover
            root.entered()
        }
        onExited: {
            indicatorImage.source = checked ? source_selected_normal : source_unselect_normal
            root.exited()
        }
    }

    Rectangle {
        id: indicator
        anchors.left: parent.left
        anchors.verticalCenter: parent.verticalCenter
        height: parent.height
        width: height
        color: "transparent"

        SvgImage {
            id: indicatorImage
            anchors.fill: parent
            source: checked ? source_selected_normal : source_unselect_normal
        }
    }

    CusText {
        id: boxText
        anchors.left: indicator.right
        anchors.verticalCenter: parent.verticalCenter
        anchors.leftMargin: 5
        color: Theme.text_color
        font.pixelSize: Theme.font_size_13
    }
}
